<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/contact.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>

	</head>
	<body>

		<!-- 头部区域 -->
		<herder>
			<!-- 头部导航栏区域 -->
			<div class="container  py-3 d-flex  justify-content-between flex-md-row flex-column">
				<ul class="list-unstyled d-flex mx-md-0 mx-auto">
					<li>
						<a href="#" class="fa fa-user nav_color">
							<i class="text-muted">Login</i>
						</a>
					</li>
					<li class="mx-3">
						<a href="#" class="fa fa-pencil nav_color">
							<i class="text-muted">Register</i>
						</a>
					</li>
					<li>
						<a href="#" class="fa fa-cart-plus nav_color">
							<i class="text-muted">Checkout</i>
						</a>
					</li>
				</ul>

				<ol class="list-unstyled d-flex mx-md-0 mx-auto ">
					<li class="mx-3">
						<a href="#" class="fa fa-heart nav_color">
							<i class="text-muted">Wishlist</i>
						</a>
					</li>

					<li>
						<a href="#" class="fa fa-angle-down nav_color ">
							<i class="text-muted">USD</i>
						</a>
					</li>
				</ol>

			</div>


			<!-- 头部导航栏搜索框区域 -->
			<div class="" style="background-image: url(images/header_bg.jpg);">
			
				<div class=" " style="background-color: rgba(0,0,0,0.8);">
			
					<div class="container py-4">
			
						<ul class="d-flex justify-content-between align-items-center flex-md-row flex-column mb-0 pl-0">
			
							<li class="">
								<a href="#"><img src="images/logo.png" class="w-100"></a>
							</li>
			
							<li class="form_qu">
								<form class="form-control d-flex justify-content-between " style=" height: 50px; padding-top: 4px; padding-right: 2px;" >
									<input type="text" placeholder="Search" class="border-0" style="outline: none;">
									<button type="" class="border-0 text-muted btn" style="background-color: #E4606D; width: 55px; height: 40px; "><i class="fa fa-search text-white"></i></button>
			
								</form>
							</li>
						</ul>
			
					</div>
			
			
				</div>
			
			</div>

			<!-- 头部导航栏分栏 -->
			<div class="w-100 nav_tou " style="background-color: #E4606D;">

				<div class="navbar navbar-expand-md p-0">
					<button type="button " class="navbar-toggler bg-white ml-auto" data-toggle="collapse" data-target="#meu" style="color: white;">
						<i class="fa fa-bars " style="background-color: #E4606D;"></i>
					</button>


					<div class="collapse navbar-collapse " id="meu">
						<ul class=" list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav "
						 style="">
							<li class="nav-item">
								<a href="index.html" class="nav-link ">Home</a>
							</li>
							<li class="nav-item ">
								<a href="about.html" class="nav-link ">About</a>
							</li>
							<li class="nav-item  ">
								<a href="services.html" class="nav-link ">Services</a>
							</li>
							<li class="nav-item  ">
								<a href="gallery.html" class="nav-link ">Gallery</a>
							</li>
							<li class="nav-item  ">
								<a href="blog.html" class="nav-link">Blog</a>
							</li>
							<li class="nav-item  ">
								<a href="shop.html" class="nav-link">Shop</a>
							</li>
							<li class="nav-item  ">
								<a href="#" class="nav-link defoult">Contact</a>
							</li>
							
						</ul>
					</div>

				</div>
			</div>

		</herder>


		<!-- 中部的区域 -->
		<main>

			<!-- 中部雪人部分 -->
			<div class="row m-0">
				<div class="col-12 pl-0 pr-0 py-5" style="background-image: url(images/choose_bg.jpg);">
					<div class=" py-5 w-100 " style="background-color: rgba(0,0,0,0.3); background: repeat; ">
						<div class=" text-center">
							<h2 class="m-0" style="color: #E4606D;">Contact</h2>
							<hr class="" style="width: 105px; background-color: #E4606D; margin-top: 1px;">
							<hr class="" style="width: 65px; background-color: #E4606D; margin-top: -12px">
							<p style="color: #E4606D;">Home<i class="text-dark"> / Contact</i></p>
						</div>
					</div>
				</div>
			</div>

			<!-- 中部的三个边框部分 -->
			<div class="container py-4">
				<ul class=" d-flex flex-md-row flex-column justify-content-between justify-content-center pl-0 ">
					<li class="mt-4 py-3 nav_san" style="border-color: #E4606D !important; border: 2px solid ; ">

						<i class="fa fa-envelope fan text-center d-block" style="color: #E4606D; font-size: 26px;"></i>

						<span class="font-weight-bold text-center d-block pt-2" style="font-size: 25px;">Email</span>

						<span class="pt-2 text-center d-block" style="font-size: ;">support@handmade.net</span>
						<span class=" text-center d-block" style="font-size: ;">support@handmade.com</span>

					</li>

					<li class="mt-4 nav_san  py-3" style="border-color: #E4606D !important;  border: 2px solid ; ">

						<i class="fa fa-phone fan text-center d-block" style="color: #E4606D; font-size: 26px;"></i>

						<span class="font-weight-bold  text-center d-block pt-2" style="font-size: 25px;">Phone</span>

						<span class="pt-2 text-center  d-block" style="font-size: ;">+21036985247</span>
						<span class=" text-center d-block" style="font-size: ;">+214567893218</span>

					</li>

					<li class="mt-4 nav_san py-3" style="border-color: #E4606D !important; border: 2px solid ; ">

						<i class="fa fa-map-marker fan  text-center d-block" style="color: #E4606D; font-size: 26px;"></i>

						<span class="font-weight-bold text-center d-block pt-2" style="font-size: 25px;">Address</span>

						<span class="pt-2 text-center d-block" style="font-size: ;">665 Clinton Lane</span>
						<span class=" text-center d-block" style="font-size: ;">Wilkes Barre,PA 18702</span>

					</li>
				</ul>
			</div>

			<!-- 中部底部的地图部分 -->
			<ul class="row p-0 m-0">
				<li class="col-md-6 col-12   overflow-hidden pr-0">
					<img src="images/map.png" class="w-100 h-100 nav_bai">
				</li>

				<li class="col-md-6 col-12 p-0 " style="background-color: #E4606D;">

					<p class="font-weight-bold text-white py-4 pl-5 m-0">Send A Message</p>

					<div class="ml-5 d-flex flex-row m-0">
						<input type="text" class="border-0 bg-white aa " placeholder="Name" />
						<input type="text" class="border-0 bg-white ml-3 aa" placeholder="Email" />
					</div>

					<div class="mt-4 ml-5 d-flex flex-row m-0">
						<input type="text" class="border-0 bg-white aa" placeholder="Phone" />
						<input type="text" class="border-0 bg-white ml-3 aa" placeholder="Subject" />
					</div>

					<div class="mt-4 ml-5 m-0">
						<textarea rows="3" cols="" class="border-0 bb" placeholder="Message"></textarea>
					</div>

					<div class="py-3 pb-5 pl-5">
						<button class=" text-center" style="border: 1px solid white; width: 105px; height: 35px; line-height: 30px; color: white; background-color: #E4606D;">SUBMT</button>
					</div>


				</li>
			</ul>

			<!-- 底部区域 -->
			<footer>

				<!-- 底部黑色区域部分 -->
				<div class="" style=" background-color: black;">

					<div class="container">

						<ul class="row m-0 pl-0">
							<li class="col-lg-4 col-md-6 col-12   py-5" style="background-color: black;">

								<img src="images/logo.png" class="">

								<p class="text-white  mt-4" style="font-size: 18px;">It is a long established fact that a reader will be
									distracted by the readable content of a page when looking at its layout.</p>



							</li>
							<li class="col-lg-2 col-md-6 col-12 " style="background-color: black;">
								<p class=" font-weight-bold mt-5" style="font-size: 19px; margin: 0px; color:  #E4606D;">Help</p>


								<div class="text-white mt-3 footer_text">
									<a href="#">
										<p>Your Beer</p>
									</a>
									<a href="#">
										<p>Customer Service</p>
									</a>
									<a href="#">
										<p>Contact</p>
									</a>
									<a href="#">
										<p>Recent Orders</p>
									</a>

								</div>


							</li>
							<li class="col-lg-2 col-md-6 col-12  py-5" style="background-color: black; margin: 0px;">
								<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Links</p>

								<div class="text-white mt-3 footer_text">
									<a href="#">
										<p>Home</p>
									</a>
									<a href="#">
										<p>Shop</p>
									</a>
									<a href="#">
										<p>404 Page</p>
									</a>
									<a href="#">
										<p>Login</p>
									</a>
								</div>

							</li>
							<li class="col-lg-4 col-md-6 col-12 py-5 " style="background-color: black;">

								<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Our Information</p>

								<div class="">
									<i class="fa fa-map-marker  mt-3" style="color:  #E4606D;"></i>
									<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">787 Lakeview St. Marion, NC
									</p>
									<p class="text-white">&nbsp;&nbsp;&nbsp; 28752 </p>
									<p></p>

								</div>

								<div class="">
									<i class="fa fa-phone t mt-3" style="color:  #E4606D;"></i>
									<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">+1800123654789 </p>
									<p class="text-white">&nbsp;&nbsp;&nbsp; +1800123456788 </p>
									<p></p>

								</div>

								<div class="">
									<i class="fa fa-envelope mt-3" style="color:  #E4606D;"></i>
									<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">Support@Handmade.Net</p>
									<p></p>

								</div>
							</li>
						</ul>

					</div>

				</div>



				<!-- 底部联系我们部分区域 -->
				<ul class="row m-0 p-0">
					<li class="col-md-6 col-12 py-3 text-center " style="background-color:#E4606D ;">
						<p class="text-white mt-2">Copyrights © 2018 All Rights <a href="#" style="color: blue;" class="a_se">Reserved</a> by Himanshusofttech</p>
					</li>

					<li class="col-md-6 col-12 text-center py-3 " style="background-color:#E4606D ;">
						<i class="fa fa-facebook text-white d-block mt-3">
							<i class="fa fa-twitter ml-3"></i>
							<i class="fa fa-google-plus ml-3"></i>
							<i class="fa fa-pinterest-p ml-3"></i>
							<i class="fa fa-linkedin ml-3"></i>
						</i>
					</li>
				</ul>
			</footer>

		</main>
	</body>
</html>
